﻿<Page
    x:Class="ImgurViral.Views.MainPageView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ImgurViral.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:vm="using:ImgurViral.ViewModels"
    xmlns:cm="using:Caliburn.Micro"
    d:DataContext="{d:DesignInstance Type=vm:MainPageViewModel, IsDesignTimeCreatable=True}"
    cm:Bind.AtDesignTime="True">
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="160" x:Name="AppBarUp"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" Background="#FF89C624">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120" x:Name="ColumnLogo" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Image Source="ms-appx:///Assets/imgur_logo_dot.png" Stretch="Uniform" Margin="20"/>
            <ProgressRing Grid.Column="0" IsActive="{Binding ProgressRingIsActive}" Height="40" Width="40" HorizontalAlignment="Center" />
            <Grid Grid.Column="1" Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" x:Uid="AppTitle" Text="" VerticalAlignment="Top" FontFamily="Segoe UI Light" FontSize="42" />
                <TextBlock Grid.Row="1" Text="{Binding SelectedItem.Title, ElementName=Items}" VerticalAlignment="Bottom" FontFamily="Segoe UI Light" FontSize="20" TextWrapping="Wrap" TextTrimming="WordEllipsis" />
            </Grid>
            <Grid Grid.Column="2" Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Vertical" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="30,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
                    <TextBlock FontFamily="Segoe UI Semibold" FontSize="14" >
                            <Run Text="{Binding SelectedIndex, Converter={StaticResource IndexConv}, ElementName=Items}"/>
                            <Run Text="/" />
                            <Run Text="{Binding Items.Count}" />
                    </TextBlock>
                    <TextBlock FontFamily="Segoe UI Semibold" FontSize="14" >
                            <Run Text="Score: " />
                            <Run Text="{Binding SelectedItem.Score, ElementName=Items}" />
                    </TextBlock>
                    <TextBlock FontFamily="Segoe UI Semibold" FontSize="14" >
                            <Run Text="Views: " />
                            <Run Text="{Binding SelectedItem.Views, ElementName=Items}" />
                    </TextBlock>
                </StackPanel>
                <AppBarButton Label="Share" x:Name="Share" Icon="ReShare" Grid.Column="0" />
                <AppBarButton Label="Logout" Icon="Remove" Grid.Column="1" Visibility="{Binding IsLogoutVisible, Converter={StaticResource BoolToVisConv}}" >
                    <AppBarButton.Flyout>
                        <Flyout>
                            <StackPanel>
                                <TextBlock Text="" x:Uid="msg_logout" FontFamily="Segoe UI Semibold" FontSize="16" />
                                <Button Content="OK" x:Name="Logout" Background="#FF89C624" Margin="8" HorizontalAlignment="Right" />
                            </StackPanel>
                        </Flyout>
                    </AppBarButton.Flyout>
                </AppBarButton>
            </Grid>
        </Grid>

        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20*" />
                <ColumnDefinition Width="60*" />
                <ColumnDefinition Width="20*" />
            </Grid.ColumnDefinitions>

            <!--cm:Message.Attach="[Event SelectionChanged] = [Action FlipViewSelectionChanged($this)]"-->
            <FlipView Grid.Column="1" x:Name="Items" IsTabStop="True" IsEnabled="{Binding IsFlipViewEnabled, Mode=TwoWay}" >
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <ScrollViewer ZoomMode="Enabled" VerticalScrollBarVisibility="Hidden" MinZoomFactor="0.5" MaxZoomFactor="1.0" VerticalScrollMode="Auto" HorizontalScrollMode="Disabled" cm:Message.Attach="[Event DoubleTapped] = [Action ImageDoubleTapped($source)]">
                            <Image Source="{Binding Link}" Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center" cm:Message.Attach="[Event ImageOpened] = [Action ImageIsOpened()]; [Event ImageFailed] = [Action ImageIsFailed()]"/>
                        </ScrollViewer>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
            
            <!--<Grid Grid.Column="1">
                <ListView x:Name="ImageComments" IsItemClickEnabled="False" SelectionMode="None" HorizontalAlignment="Center">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Border CornerRadius="4"  BorderBrush="Gray" BorderThickness="1" Padding="4" Background="#FF3E3E3E">
                                <StackPanel>
                                    <TextBlock Text="{Binding Author}" FontWeight="Bold" LineHeight="25" />
                                    <TextBlock Text="{Binding Comment}" TextWrapping="WrapWholeWords" />
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Grid>-->
        </Grid>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="DefaultLayout">
                    <Storyboard>
                    </Storyboard>
                </VisualState>

                <VisualState x:Name="MinimalLayout">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames 
                            Storyboard.TargetProperty="Height" 
                            Storyboard.TargetName="AppBarUp">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="200" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames 
                            Storyboard.TargetProperty="Width" 
                            Storyboard.TargetName="ColumnLogo">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
    </Grid>

</Page>
